<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html ;charset=utf-8" />
    <!-- JQuery CDN import -->
 <%--   <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.2.1/jquery.js"></script>--%>
    <!-- JQuery Local import -->
    <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/upload/ajaxUpload2/ajaxupload.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/upload/iframe/css/upload.css" />

</head>

<h3 style="margin-top:5%;text-align: center">上传图片测试</h3>
<!-- Upload file form -->
<form id="upload-file-form">
    <label for="upload-file-input">上传操作:</label>
    <div  id="btnUp"  class="upload-cover-btn" >选择文件
        <input id="upload-file-input"  type="file" capture="camera" accept="image/*" name="uploadFile"  multiple="multiple"/>
    </div>
    <br/>
</form>
<!-- Upload Message-->
<hr>
<div>
    <label>结果:</label>
    <span id="upload-file-message"></span>
    <div id="img_list"></div>
</div>

<!-- Javascript functions -->
<script>
    $(function () {
        var button = $("#btnUp"), interval;
        new AjaxUpload(button,{
            action: "/ajax/upload",
            type:"POST",
            //data:{},
            //autoSubmit:false,
            responseType:"json",
            name: "uploadfile",
            onSubmit: function (file, ext) {
                if (!(ext && /^(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$/.test(ext))) {
                    alert("您上传的图片格式不对，请重新选择！");
                    return false;
                }
            },
            onComplete: function (file, data) {
                $("#upload-file-message").text(data.message);
                if (200==data.code) {
                    addImage(data);
                }
            }
        });
    });


    //add by tomas
    //添加图片
    function addImage(data) {
        //alert(data);
        var images = []; //已经上传的图片列表
        // 优化retina, 在retina下这个值是2
        var ratio = window.devicePixelRatio || 1,thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio;
        if ( data.code != "200" ) return;
        var text ='<div class="img-wrapper"><div class="img-container" style="width: "+thumbnailWidth; height:"+thumbnailHeight>';
        text += '<img width="113px" height="113px"  src="'+data.data+'">';
        text += '<div class="file-opt-box clearfix"><span class="remove">删除</span></div></div></div>';
        var $image =$(text);
        $("#img_list").append($image);
        //删除图片
        $image.find(".remove").on("click", function() {
            try {
                var src = $(this).parent().prev().attr("src");
                images.remove(src);
                $image.remove();
            } catch (e) {console.log(e);}
        });
        images.push(data.data);
        console.log(images);
    }
    if ( Array.prototype.remove == undefined ) {
        Array.prototype.remove = function(item) {
            for ( var i = 0; i < this.length; i++ ) {
                if ( this[i] == item ) {
                    this.splice(i, 1);
                    break;
                }
            }
        }
    }
</script>
</body>
</html>
